<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="myli">111</li>
        <li class="myli">111</li>
        <li class="myli">111</li>
        <li class="myli">111</li>
        <!-- <p>555</p> -->
        <button>点击</button>
    </ul>
    <script>
        // 事件委托：把事件委托给父级元素；
        var lis = document.querySelectorAll("li");
        lis.forEach(function(item) {
            item.onclick = function() {
                console.log(123);
            };
        });
        // 事件委托；
        /*  var ulEle = document.querySelector("ul");
                                ulEle.onclick = function(e) {
                                    console.log(1111);
                                    var e = e || window.event;
                                    var target = e.target || e.srcElement;
                                    console.log(target);
                                    console.log(target.nodeName, target.nodeValue);
                                    if (target.nodeName == "LI") {
                                        console.log("点击了li元素");
                                    }
                                    if (target.className == "myli") {
                                        console.log("点击了li");
                                    }
                                    if (target.innerHTML == "111") {
                                        console.log("点击了li");
                                    }
                                }; */
        // 事件委托 ：1.性能更好；(元素比较多)  2.动态的修改元素事件不会受到影响；

        // 动态修改元素事件不会受到影响；
        // 普通绑定
        /*  var lis = document.querySelectorAll("li");
                          var ulEle = document.querySelector("ul");
                          lis.forEach(function(li) {
                              li.onclick = function() {
                                  console.log("点击了li");
                              };
                          }); */
        // 事件委托绑定
        var ulEle = document.querySelector("ul");
        ulEle.onclick = function(e) {
            if (e.target.nodeName == "LI") {
                console.log("点击了li");
            }
        };

        var btn = document.querySelector("button");
        btn.onclick = function() {
            var liEle = document.createElement("li");
            liEle.innerHTML = "添加的li";
            ulEle.appendChild(liEle);
        };
    </script>
</body>

</html>